<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        /*
            在控制页面布局时，当父容器的position为relative，子组件的position为absolute时，可以把子组件相对于父组件进行绝对布局
        */
        .container {
            position: relative;
            margin: 0 auto;
            width: 440px;
            height: 440px;
            background-color: blanchedalmond;
        }
        .ball {
            position: absolute;
            width: 30px;
            height: 30px;
            left: 0px;
            top: 0px;
            background-color: orange;
            border-radius: 30px;
        }
        .board {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 10px;
            width: 80px;
            border-radius: 5px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 游戏区域 -->
        <div class="container">
            <!-- 底部挡板 -->
            <div class="board" :style="{left:boardX + 'px'}"></div>
            <!-- 弹球 -->
            <div class="ball" :style="{left:ballX + 'px',top:ballY + 'px'}"></div>
            <!-- 游戏结束提示 -->
            <h1 v-if="fail" style="text-align: center;">游戏结束</h1>
        </div>
    </div>

<script>
    const {createApp,ref,onMounted} = Vue

    const config = {
        setup() {

            // 控制挡板的位置
            const boardX = ref(0)
            // 弹球的位置
            const ballX = ref(0)
            const ballY = ref(0)
            // 弹球的速度，这个在模板中不用 可以不是响应式的
            let rateX = 0.4
            let rateY = 0.4
            // 控制游戏结束提示的显示
            const fail = ref(false)
            // 计时器
            let timer = undefined

            // 控制挡板的移动
            const keydown = (event) => {
                if (event.key === "ArrowLeft") {
                    if (boardX.value > 10) {
                        boardX.value -= 20
                    }
                } else if (event.key === "ArrowRight") {
                    if (boardX.value < 440 - 80) {
                        boardX.value += 20
                    }
                }
            }

            // 向整个文档元素添加键盘事件
            const enterKeydown = () => {
                document.addEventListener("keydown", keydown)
            }

            // 组件生命周期函数，组件加载完后执行
            onMounted(() => {
                // 添加键盘事件
                enterKeydown()
                // 随机弹球的运动速度和方向
                rateX.value = Math.random() + 0.1
                rateY.value = Math.random() + 0.1
                // 开启计数器，控制弹球移动
                timer = setInterval(() => {
                   // 到达右侧边缘时进行反弹
                   if (ballX.value + rateX >= 440 - 30) {
                       rateX *= -1
                   }
                   // 到达左侧边缘时进行反弹
                    if (ballX.value + rateX <= 0) {
                        rateX *= -1
                    }
                    // 到达上边缘时进行反弹
                    if (ballY.value + rateY <= 0) {
                        rateY *= -1
                    }
                    // 控制小球移动
                    ballX.value += rateX
                    ballY.value += rateY
                    // 失败判断
                    if (ballY.value >= 440 - 30 - 10) {
                        // 挡板接住了球
                        if (boardX.value <= ballX.value + 30 && boardX.value + 80 >= ballX.value){
                            rateY *= -1
                        } else {
                            // 球未接住
                            clearInterval(timer)
                            fail.value =  true
                        }
                    }
                },2)
            })
            return {boardX,ballX,ballY,fail}
        }
    }
    const app = createApp(config)
    app.mount('#app')
</script>
</body>
</html>